<template>
  <div class="merchant-card" :class="{ 'hover-effect': true }">
    <!-- <div class="merchant-card-header" @click="$emit('view-details', merchant)"> -->
    <div class="merchant-card-header">
      <div class="merchant-logo">
        <img :src="merchant.shop_cover_list && merchant.shop_cover_list.length && merchant.shop_cover_list[0]"
          :alt="merchant.name">
      </div>
      <div class="merchant-info">
        <h3 class="merchant-name" title="点击查看详情">{{ merchant.shop_title }}</h3>
        <div class="merchant-meta" v-if="!!merchant.shop_class_list">
          <span class="merchant-category" v-for="classItem in merchant.shop_class_list || []" :key="classItem.id">{{
            classItem.type_name }}</span>

          <!-- <span class="merchant-status" :class="getStatusClass(merchant.status)">{{ getStatusText(merchant.status)
            }}</span> -->
        </div>
      </div>
      <div class="view-details-icon">
        <i class="fas fa-chevron-right"></i>
      </div>
    </div>

    <div class="merchant-card-body">
      <div class="merchant-stats">
        <div class="stat-item">
          <div class="stat-value" style="color:blue">{{ merchant.id }}</div>
          <div class="stat-label">ID</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ formatNumber(merchant.countData.countId) }}</div>
          <div class="stat-label">交易量</div>
        </div>

        <div class="stat-item">
          <div class="stat-value">{{ formatNumber(merchant.countData.sumOrderMoney) }}</div>
          <div class="stat-label">订单金额</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ merchant.countDataGoods }}</div>
          <div class="stat-label">商品数</div>
        </div>
      </div>

      <div class="merchant-rating">
        <span :style="{ color: merchant.status === 0 ? 'red' : 'blue' }">
          {{ merchant.status === 0 ? '禁用' : '启用' }}
        </span>&nbsp;&nbsp;&nbsp;
        <span class="rating-label">评分:</span>
        <div class="rating-stars">
          <!-- <i v-for="i in merchant.star" :key="i" class="fas"
            :class="i <= Math.floor(merchant.star) ? 'fa-star' : (i - 0.5 <= merchant.star ? 'fa-star-half-alt' : 'fa-star far')"></i> -->

          <!-- <span class="rating-value">{{ merchant.star }}</span> -->
          <el-rate v-model="merchant.star" show-score disabled />
        </div>
      </div>
    </div>

    <div class="merchant-card-footer">
      <!--   <button class="action-btn edit-btn" @click="$emit('edit', merchant)">
        <i class="fas fa-edit"></i> 编辑
      </button>

      <button class="action-btn products-btn" @click="$emit('manage-products', merchant)">
        <i class="fas fa-box"></i> 管理产品
      </button> -->


      <!-- <button
        class="action-btn"
        :class="merchant.status === 'active' ? 'disable-btn' : 'enable-btn'"
        @click="$emit('toggle-status', merchant)"
      >
        <i class="fas" :class="merchant.status === 'active' ? 'fa-ban' : 'fa-check-circle'"></i>
       删除
      </button> -->
    </div>

    <div class="padding-xs flex flex-wrap">
      <!-- 删除功能没写,请求接口 /admin/setShopDelete 参数 id -->
      <div class=" margin-top-xs w-50">
        <el-button type="primary" class="w-100" @click="$emit('delete', merchant)">删除</el-button>
      </div>

      <div class=" margin-top-xs w-50">
        <el-button type="primary" class="w-100" @click="$emit('edit', merchant)">编辑</el-button>
      </div>

      <div class=" margin-top-xs w-50">
        <el-button type="danger" class="w-100" @click="$emit('manage-products', merchant)">管理产品</el-button>
      </div>

      <!-- <div class=" margin-top-xs w-50">
        <el-button type="warning" class="w-100" @click="$emit('choose-cover', merchant)">选择头像</el-button>
      </div> -->

      <!--    <div class=" margin-top-xs w-50">
        <el-button type="info" class="w-100" @click="$emit('choose-banner', merchant)">选择banner</el-button>
      </div> -->
    </div>

  </div>
</template>

<script setup lang="ts">

import { defineProps, defineEmits } from 'vue';

interface MerchantProps {
  id: string;
  name: string;
  shop_title: string;
  logo: string;
  description: string;
  address: string;
  contactPerson: string;
  contactPhone: string;
  email: string;
  createTime: string;
  status: string;
  transactionVolume: number;
  orderCount: number;
  rating: number;
  category: string;
}

const props = defineProps<{
  merchant: MerchantProps;
}>();

defineEmits(['edit', 'manage-products', 'choose-cover', 'choose-banner', 'toggle-status', 'view-details']);

// 获取状态对应的CSS类名
const getStatusClass = (status: string) => {
  switch (status) {
    case 'active':
      return 'status-active';
    case 'inactive':
      return 'status-inactive';
    case 'pending':
      return 'status-pending';
    default:
      return '';
  }
};

// 获取状态对应的显示文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'active': '活跃',
    'inactive': '停用',
    'pending': '待审核'
  };
  return statusMap[status] || status;
};

// 格式化数字，添加千位分隔符
const formatNumber = (num: number | undefined | null) => {
  if (num === undefined || num === null) return '0';
  return num.toLocaleString('zh-CN');
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.merchant-card {
  background-color: $white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-sm;
  transition: all $transition-base;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid $gray-200;

  &.hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: $shadow-lg;
  }

  .merchant-card-header {
    padding: $spacing-md;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $gray-200;
    cursor: pointer;
    position: relative;

    &:hover {
      background-color: rgba($primary, 0.05);

      .merchant-name {
        color: $primary;
      }

      .view-details-icon {
        opacity: 1;
      }
    }

    .view-details-icon {
      position: absolute;
      right: $spacing-md;
      opacity: 0;
      color: $primary;
      transition: opacity $transition-base;
    }

    .merchant-logo {
      width: 60px;
      height: 60px;
      border-radius: $border-radius-md;
      overflow: hidden;
      flex-shrink: 0;
      background-color: $gray-100;
      margin-right: $spacing-md;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .merchant-info {
      flex: 1;
      min-width: 0;

      .merchant-name {
        margin: 0 0 $spacing-xs;
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        color: $text-primary;
        @include text-truncate;
      }

      .merchant-meta {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-xs;

        .merchant-category {
          background-color: $gray-200;
          color: $text-secondary;
          padding: 2px 8px;
          border-radius: $border-radius-pill;
          font-size: $font-size-xs;
        }

        .merchant-status {
          padding: 2px 8px;
          border-radius: $border-radius-pill;
          font-size: $font-size-xs;
          font-weight: $font-weight-medium;

          &.status-active {
            background-color: rgba($success, 0.1);
            color: $success;
          }

          &.status-inactive {
            background-color: rgba($danger, 0.1);
            color: $danger;
          }

          &.status-pending {
            background-color: rgba($warning, 0.1);
            color: $warning;
          }
        }
      }
    }
  }

  .merchant-card-body {
    padding: $spacing-md;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .merchant-stats {
      display: flex;
      margin-bottom: $spacing-md;

      .stat-item {
        flex: 1;
        text-align: center;

        &:first-child {
          border-right: 1px solid $gray-200;
        }

        .stat-value {
          font-size: $font-size-lg;
          font-weight: $font-weight-bold;
          color: $text-primary;
        }

        .stat-label {
          font-size: $font-size-xs;
          color: $text-tertiary;
          margin-top: 4px;
        }
      }
    }

    .merchant-rating {
      display: flex;
      align-items: center;

      .rating-label {
        font-size: $font-size-sm;
        color: $text-secondary;
        margin-right: $spacing-xs;
      }

      .rating-stars {
        color: $warning;
        display: flex;
        align-items: center;

        i {
          margin-right: 2px;
        }

        .rating-value {
          margin-left: $spacing-xs;
          font-weight: $font-weight-medium;
          color: $text-primary;
        }
      }
    }
  }

  .merchant-card-footer {
    padding: $spacing-md;
    border-top: 1px solid $gray-200;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: $spacing-xs;

    .action-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: $spacing-xs $spacing-sm;
      border-radius: $border-radius-md;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      border: none;
      cursor: pointer;
      transition: all $transition-fast;

      i {
        margin-right: 4px;
      }

      &.edit-btn {
        background-color: $info;
        color: $white;

        &:hover {
          background-color: darken($info, 5%);
        }
      }

      &.products-btn {
        background-color: $primary;
        color: $white;

        &:hover {
          background-color: darken($primary, 5%);
        }
      }

      &.disable-btn {
        background-color: $danger;
        color: $white;

        &:hover {
          background-color: darken($danger, 5%);
        }
      }

      &.enable-btn {
        background-color: $success;
        color: $white;

        &:hover {
          background-color: darken($success, 5%);
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: $breakpoint-sm) {
  .merchant-card {
    .merchant-card-footer {
      flex-direction: column;

      .action-btn {
        width: 100%;
      }
    }
  }
}

@media (max-width: $breakpoint-md) {
  .merchant-card {
    .merchant-card-header {
      flex-direction: column;
      align-items: center;
      text-align: center;

      .merchant-logo {
        margin-right: 0;
        margin-bottom: $spacing-sm;
      }

      .merchant-meta {
        justify-content: center;
      }
    }
  }
}
</style>
